<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>修改宿舍信息详情页面</title>
    <style>
      body {
        background-image: url(./img/v2-eb914abdab236dea6c6d6d65b2914898_r.jpg);
        background-repeat: no-repeat;
        opacity: 0.7;
      }
      .justify-content-end {
        border: 1px solid rgb(197, 197, 197);
      }
      .list-group > li {
        width: 20%;
        text-align: center;
        margin: 10px 0;
        height: 13%;
      }
      h1 {
        text-align: center;
      }
      #aboat {
        text-align: center;
      }
      #aboat > a {
        text-decoration: none;
        color: rgb(83, 83, 83);
      }

      ul > li > .btn-primary {
        background-color: white;
        color: rgb(83, 83, 83);
        border: 0px;
      }
      ul > li:hover {
        background-color: grey !important;
      }
      #x:hover {
        color: rgb(83, 83, 83);
        background-color: grey;
      }
      ul > li > .collapse {
        display: inline;

        border: 0px !important;
      }
      a {
        text-decoration: none !important;
      }
      #content {
        position: absolute;
        width: 70% !important;
        height: 60%;
        top: 20%;
        left: 25%;
        border: 2px solid rgb(158, 156, 156);
      }
      #content > div {
        width: 35%;
        float: left;
      }
      #content > div > div {
        margin-top: 10px;
        margin-left: 20px;
      }
    </style>

    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <ul class="nav justify-content-end">
      <li class="nav-item">
        <a class="nav-link active" href="#">个人信息</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">修改信息</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="./学生宿舍管理系统登陆页面.html">退出</a>
      </li>
      <li class="nav-item">
        <img
          src="./img/屏幕截图 2022-03-18 093414.png"
          alt=""
          class="nav-link"
        />
      </li>
    </ul>
    <h1>欢迎登录学生宿舍管理系统</h1>
    <ul class="list-group">
      <li class="list-group-item disabled" aria-disabled="true">信息模块</li>
      <li class="list-group-item">
        <button
          class="btn btn-primary"
          id="x"
          type="button"
          data-toggle="collapse"
          data-target="#collapseExample"
          aria-expanded="false"
          aria-controls="collapseExample"
        >
          管理信息模块
        </button>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            <a href="">超级管理员</a>
          </div>
        </div>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            <a href="">辅导管理员</a>
          </div>
        </div>
        <div class="collapse" id="collapseExample">
          <div class="card card-body">
            <a href="">宿舍管理员</a>
          </div>
        </div>
      </li>
      <li class="list-group-item">
        <button
          class="btn btn-primary"
          id="x"
          type="button"
          data-toggle="collapse"
          data-target="#collapseExample1"
          aria-expanded="false"
          aria-controls="collapseExample"
        >
          班级管理模块
        </button>
        <div class="collapse" id="collapseExample1">
          <div class="card card-body">
            <a href="./查看班级信息页面.html">查看班级信息</a>
          </div>
        </div>
        <div class="collapse" id="collapseExample1">
          <div class="card card-body">
            <a href="./添加班级信息页面.html">添加班级信息</a>
          </div>
        </div>
      </li>
      <li class="list-group-item">
        <button
          class="btn btn-primary"
          id="x"
          type="button"
          data-toggle="collapse"
          data-target="#collapseExample2"
          aria-expanded="false"
          aria-controls="collapseExample"
        >
          学生信息模块
        </button>
        <div class="collapse" id="collapseExample2">
          <div class="card card-body">
            <a href="./查看学生信息页面.html">查看学生信息</a>
          </div>
        </div>
        <div class="collapse" id="collapseExample2">
          <div class="card card-body">
            <a href="./添加学生信息页面.html">添加学生信息</a>
          </div>
        </div>
      </li>
      <li class="list-group-item">宿舍信息模块</li>
      <li class="list-group-item">宿舍变动模块</li>
      <li class="list-group-item">系统日志模块</li>
    </ul>
    <div id="content">
      <div>
        <div>一号床</div>
        <div><input type="text" value="张三——18380952983" class="later" /></div>
        <div>二号床</div>
        <div><input type="text" value="李四——18380952983" class="later" /></div>
      </div>
      <div>
        <div>三号床</div>
        <div><input type="text" value="王五——18380952983" class="later" /></div>
        <div>四号床</div>
        <div>空</div>
        <div>
          <input type="button" value="保存" id="down" /><span
            style="width: 20px"
          ></span>
          <input type="button" value="修改" id="alter" />
        </div>
      </div>
    </div>

    <div id="aboat">
      <a href="">电子科技大学@1956-2022</a>|<a href="">加入我们</a>|<a href=""
        >合作联系</a
      >|<a href="">联系客服</a>|<a href="">隐私政策</a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      $('.btn-primary').click(function () {
        $('.btn-primary').hover(function () {
          $('.btn-primary').css({
            'background-color': 'white',
            color: 'rgb(83, 83, 83)',
          })
        })
      })
      $('#down').click(function () {
        $('.later').attr('readonly', 'readonly')
        $('#down').attr('disabled', 'true')
      })
    </script>
  </body>
</html>
